


Openbound Style on AO3

by lumpydreams



Category: Homestuck
Genre: Homestuck Formatting, Work In Progress, for if you want to create openbound-like adventures on ao3
Language: English
Status: Completed
Published: 2019-06-24
Updated: 2019-06-25
Packaged: 2020-05-13 19:15:51
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 4
Words: 1,535
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/19257493
Author URL: https://archiveofourown.org/users/lumpydreams/pseuds/lumpydreams
Summary: Openbound WorkSkin + example with sprites and backgrounds pulled from google. First chapter is an example of how it looks like, the second chapter is the workskin (the homestuck text is pulled from the public Homestuck Skin), the third chapter explains the html a little bit and the forth chapter is the raw html. This works best on desktop! If there's enough interest I'll try to get it to scale correctly on mobile as well





	1. Example

**Author's Note:**

> Someone on twitter mentioned that they wondered if you could write an openbound-like fic on AO3 and I wondered the same thing. :) Text is just straight from homestuck.

  


ROSE: 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 

#whatmoralquandaries #liebeforeus  


  


JADE: 

Sem integer vitae justo eget. Ultricies integer quis auctor elit sed vulputate mi sit amet. Sed turpis tincidunt id aliquet risus feugiat in. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Turpis cursus in hac habitasse platea. Neque volutpat ac tincidunt vitae. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Tempor commodo ullamcorper a lacus. Ut aliquam purus sit amet luctus. 

#prospitdreamers #bestdreamers  


**Notes for the Chapter:**

> Jade sprite created by: https://katolilly-archive.tumblr.com/post/60894328432/aaaaahh-i-couldnt-resist  
> Other assests found from https://mspaintadventures.fandom.com/wiki/Openbound


	2. Work Skin

**Summary for the Chapter:**

> Honestly, just follow the workskin and html instructions here:  
> https://archiveofourown.org/works/1159609/chapters/2355671

The following is the workskin used to generate the openbound panels in the first chapter.

Some things to note:  
\- The sprites are assumed to be around the same height and width. If you don't want your sprites to be warped, then make sure that the height of the image is 500px or play with the height constraints as necessary.  
\- The base sprite images are also assumed to be facing the same direction; to the right. For dialogue where the sprite should be located on the left side of the dialog, use the class tags that end in L in the html and vice versa.

<== Copy the text after this into a new work skin
    
    
    /* Every different background should have a new class style. */
    #workskin .bg1 {
      background-image: url("https://www.spriters-resource.com/resources/sheets/89/91882.png");
    }
    
    #workskin .backgrounddiv {
      position: relative;
      height: 500px;
      padding: 0% 10%;
      background-size: 100% 100%;
      max-width: 700px;
      margin: auto;
    }
    
    /* Style sheets for the sprites that are on the left.*/
    
    #workskin .textboxL {
      background: #cecece;
      background-image: linear-gradient(#cecece,#eeeeee);
      color: #564f03;
      text-align: left;
      height: 300px;
      margin: 0 auto 25 px;
      padding: 3%;
      padding-left: 250px;
      display: block;
      border-radius: 10px;
      border: 5px solid #b8bebe;
    }
    
    #workskin .smalltextboxL {
      background: #cecece;
      background-image: linear-gradient(#cecece,#eeeeee);
      color: #564f03;
      text-align: left;
      min-height: 30px;
      margin: auto 25 px;
      padding: 15px;
      padding-left: 250px;
      display: block;
      border-radius: 10px;
      border: 5px solid #b8bebe;
    }
    
    #workskin .characterimgL {
      height: 500px;
      position: absolute;
      bottom: 0;
      margin-left: -70px;
    }
    
    /* Style sheets for sprites that are on the right.*/
    
    #workskin .textboxR {
      background: #cecece;
      background-image: linear-gradient(#cecece,#eeeeee);
      color: #564f03;
      text-align: left;
      height: 300px;
      margin: 0 auto 25 px;
      padding: 3%;
      padding-right: 250px;
      display: block;
      border-radius: 10px;
      border: 5px solid #b8bebe;
    }
    
    #workskin .smalltextboxR {
      background: #cecece;
      background-image: linear-gradient(#cecece,#eeeeee);
      color: #564f03;
      text-align: left;
      min-height: 30px;
      margin: auto 25 px;
      padding: 15px;
      padding-right: 40%;
      display: block;
      border-radius: 10px;
      border: 5px solid #b8bebe;
    }
    
    #workskin .characterimgR {
      height: 500px;
      position: absolute;
      bottom: 0;
      -webkit-transform: scaleX(-1);
      right: -1%;
    }
    
    /* Public Homestuck style sheet.*/
    
    #workskin .background {
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
      background: #EEEEEE;
      padding-top: 20px;
      padding-bottom: 20px;
    }
    
    #workskin .command {
      text-align: center;
      width: 960px;
      font-weight: bold;
      font-size: 28px;
      font-family: courier new, courier;
      color: #000000;
    }
    
    #workskin .text {
      text-align: center;
      width: 960px;
      font-weight: bold;
      font-size: 14px;
      font-family: courier new, courier;
      color: #000000;
    }
    
    #workskin .block {
      font-weight: bold;
      font-size: 14px;
      font-family: courier new, courier;
      text-align: left;
      width: 920px;
      margin-left: auto;
      margin-right: auto;
      border: 1px dashed #808080;
      padding-top: 19px;
      padding-bottom: 19px;
      padding-left: 19px;
      padding-right: 19px;
    }
    
    #workskin .black,
    #workskin .pesterlog {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #000000;
    }
    
    #workskin .white {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #ffffff;
    }
    
    #workskin .aradia {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #a10000;
    }
    
    #workskin .AR,
    #workskin .dave,
    #workskin .ARquiusprite {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #e00707;
    }
    
    #workskin .athblue {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #0000ff;
    }
    
    #workskin .athred,
    #workskin .kankri,
    #workskin .altkarkat {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #ff0000;
    }
    
    #workskin .bro,
    #workskin .davesprite,
    #workskin .dirk {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #f2a400;
    }
    
    #workskin .dad,
    #workskin .pipefan413 {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #4b4b4b;
    }
    
    #workskin .equius,
    #workskin .horuss {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #000056;
    }
    
    #workskin .eridan,
    #workskin .cronus {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #6a006a;
    }
    
    #workskin .exile {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #ffffff;
      background-color: #000000;
    }
    
    #workskin .feferi,
    #workskin .meenah {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #77003c;
    }
    
    #workskin .gamzee,
    #workskin .kurloz {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #2b0057;
    }
    
    #workskin .jade,
    #workskin .erisolsprite {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #4ac925;
    }
    
    #workskin .jadesprite,
    #workskin .jake {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #1f9400;
    }
    
    #workskin .jane,
    #workskin .nannasprite {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #00d5f2;
    }
    
    #workskin .jaspersprite,
    #workskin .mom,
    #workskin .roxy {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #ff6ff2;
    }
    
    #workskin .john,
    #workskin .tavrisprite {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #0715cd;
    }
    
    #workskin .kanaya,
    #workskin .porrim {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #008141;
    }
    
    #workskin .karkat {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #626262;
    }
    
    #workskin .nepeta,
    #workskin .meulin {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #416600;
    }
    
    #workskin .rose {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #b536da;
    }
    
    #workskin .scratch-green {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #ffffff;
      background-color: #1f9400;
    }
    
    #workskin .scratch,
    #workskin .scratch-white {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #ffffff;
      background-color: #ffffff;
    }
    
    #workskin .sollux,
    #workskin .mituna {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #a1a100;
    }
    
    #workskin .strider {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #f2a400;
    }
    
    #workskin .tavros,
    #workskin .rufioh {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #a15000;
    }
    
    #workskin .terezi,
    #workskin .latula {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #008282;
    }
    
    #workskin .uu,
    #workskin .uranianumbra,
    #workskin .calliope {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #929292;
    }
    
    #workskin .undyingumbrage,
    #workskin .caliborn {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #323232;
    }
    
    #workskin .vriska,
    #workskin .aranea {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #005682;
    }
    
    #workskin .altcaliborn,
    #workskin .felt,
    #workskin .lordenglish {
      font-size: 14px;
      font-weight: bold;
      font-family: courier, monospace;
      color: #2ed73a;
    }


	3. HTML Explained

**Summary for the Chapter:**

> This is a little more complicated. For convenience, the raw HTML will be in chapter 4 and this chapter will go through it line by line. The bolded italicized text is the html. 

**_< div class="bg1 backgrounddiv">_ **

Every unique panel needs to have both classes. Change bg1 to whatever you defined in the css file to change the background. As far as I can tell, the style tag gets sanitized by AO3 so I think this is the best way to do it.

 

  _ **< p>**_ _ **< img src="https://vignette.wikia.nocookie.net/mspaintadventures/images/5/56/Rosetalkingsprites.gif/revision/latest?cb=20121023135442" class="characterimgL" /></p>**_

Every sprite image gets either _**characterimgL**_ or **_characterimgR_** for whether or not they will be placed on the left or right side of the panel.

 

_**< div class="textboxL rose">** _

Similarly, the textbox will be shifted to accommodate the side of the panel that the character is on. Substitute  ** _rose_** for any character that you want to speak and the color + font will change accordingly.

 

_**< p>ROSE: </p>** _

_**< p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.**_ _**< /p></div>** _

Dialog text here!

 

_**< div class="smalltextboxL dad">** _

_**< p> #whatmoralquandaries #liebeforeus<br />** _  
_** </p></div></div>** _

Use the class  ** _smalltextboxL_** to add tags like they do in the openbound game. The ** _dad_** class is used just for convenient black color. The rest is basically the same concept but for Jade.

 

**_< div class="bg1 backgrounddiv">_ **

**_< p>_ **  
**_ <img src="https://66.media.tumblr.com/f7fa557836e334ad114be3d6e78462e6/tumblr_inline_msxtqln8Pz1qz4rgp.gif" class="characterimgR" /></p>_ **

**_< div class="textboxR jade">_ **

**_< p>JADE: </p>_ **

**_< p>Sem integer vitae justo eget. Ultricies integer quis auctor elit sed vulputate mi sit amet. Sed turpis tincidunt id aliquet risus feugiat in. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Turpis cursus in hac habitasse platea. Neque volutpat ac tincidunt vitae. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Tempor commodo ullamcorper a lacus. Ut aliquam purus sit amet luctus._** **_< /p></div><div class="smalltextboxR dad">_ **

**_< p> #prospitdreamers #bestdreamers<br />_ **  
**_ </p></div></div>_ **


	4. Raw HTML

<div class="bg1 backgrounddiv">

 <p><img src="https://vignette.wikia.nocookie.net/mspaintadventures/images/5/56/Rosetalkingsprites.gif/revision/latest?cb=20121023135442" class="characterimgL" /></p>

<div class="textboxL rose">

<p>ROSE: </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p></div>

 <div class="smalltextboxL dad">

<p> #whatmoralquandaries #liebeforeus<br />   
</p></div></div>

 

<div class="bg1 backgrounddiv">

<p>   
<img src="https://66.media.tumblr.com/f7fa557836e334ad114be3d6e78462e6/tumblr_inline_msxtqln8Pz1qz4rgp.gif" class="characterimgR" /></p>

<div class="textboxR jade">

<p>JADE: </p>

<p>Sem integer vitae justo eget. Ultricies integer quis auctor elit sed vulputate mi sit amet. Sed turpis tincidunt id aliquet risus feugiat in. Nibh venenatis cras sed felis eget velit aliquet sagittis id. Turpis cursus in hac habitasse platea. Neque volutpat ac tincidunt vitae. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Tempor commodo ullamcorper a lacus. Ut aliquam purus sit amet luctus. </p></div><div class="smalltextboxR dad">

<p> #prospitdreamers #bestdreamers<br />   
</p></div></div>


End file.
